<template>
  <div class="login-index">
    <div class="login-index-bg"></div>
    <div class="login-index-container">
      <div class="login-index-main">
        <img @click="toHome" src="./../../assets/image/login/logo.png" class="logo-image" alt="logo" width="160" height="61"/>
        <div class="main-tab">
          <div :class="{'each-tab': true, 'is-active': activeValue === 1}" @click="activeValueChange(1)">
            <span>短信登录</span>
            <div class="bottom-line"></div>
          </div>
          <div :class="{'each-tab': true, 'is-active': activeValue === 2}" @click="activeValueChange(2)">
            <span>账号登录</span>
            <div class="bottom-line"></div>
          </div>
        </div>
        <div class="login-info">
          <div class="user-account">
            <div class="input-icon"></div>
            <a-input placeholder="请输入手机号" v-if="activeValue === 1" v-model="userPhone" type="number" :max-length="11" @blur="phoneBlur"/>
            <a-input placeholder="请输入您的账号" v-model="username" v-else/>
          </div>
          <div class="user-password" v-if="activeValue === 2">
            <div class="input-icon password-icon"></div>
            <a-input placeholder="请输入密码" v-model="password" v-if="showPassword"></a-input>
            <a-input placeholder="请输入密码" v-model="password" type="password" v-else></a-input>
            <div class="right-icon" @click="changePasswordShow">
              <img src="./../../assets/image/login/show.png" v-if="showPassword">
              <img src="./../../assets/image/login/hidden.png" v-else>
            </div>
          </div>
          <div class="sms-verification-code" v-if="activeValue === 1">
            <div class="input-icon sms-icon"></div>
            <a-input placeholder="请输入验证码" type="number" v-model="smsCode" :max-length="6"/>
            <div class="right-option">
              <div class="option-content" @click="sendSmsTab" v-if="countDown === 0">
                <span>获取验证码</span>
              </div>
              <div class="count-down" v-else>
                <span>{{countDown}}s</span>
              </div>
            </div>
          </div>
        </div>
        <div class="spare-area" v-if="activeValue === 2">
          <div class="left-area">
            <a-checkbox v-model="rememberMe" @change="rememberMeTab">记住我</a-checkbox>
          </div>
          <div class="right-area">
            <span @click="retrievePassword">忘记密码？</span>
          </div>
        </div>
        <div class="options-btn" :style="{ opacity: (activeValue === 1&&userPhone&&smsCode)||(activeValue === 2&&username&&password) ? 1 : 0.4 }" @click="confirmLogin">
          <span>登录</span>
        </div>
        <div class="weixin-login">
          <div class="weixin-icon"></div>
          <div class="label">
            <span>微信登录</span>
          </div>
        </div>
      </div>
    </div>

    <!--验证码-->
    <verification-code v-model="verificationDialog" v-if="verificationDialog" @confirmDialog="confirmDialog"></verification-code>
  </div>
</template>

<script>
  import verificationCode from '@/components/verificationCode'
  export default {
    name: 'loginIndex',
    data() {
      return {
        activeValue: 1,
        userPhone: '',
        username: '',
        password: '',
        verification: '',
        verificationDialog:false,
        smsCode: '',
        countDown: 0,
        countDownTime: 60,
        rememberMe: false,
        imgKey: '',
        showPassword: false
      }
    },
    created() {
    },
    methods: {
      // 前往首页
      toHome() {
        this.$router.push('/');
      },
      // 切换密码显示隐藏
      changePasswordShow() {
        this.showPassword = !this.showPassword;
      },
      // 确定登录
      confirmLogin() {
        if (this.activeValue === 1&&this.userPhone&&this.smsCode) {
          let userPhone = this.userPhone;
          if (!this.checkPhoneNum(userPhone)) {
              this.$message.error('请输入正确的手机号');
              return;
          }
          this.smsCodeLogin();
        } else if (this.activeValue === 2&&this.username&&this.password){
          this.passwordLogin();
        }
      },
      // 验证码登录处理
      smsCodeLogin() {
        if (!this.smsCode) {
          this.$message.error('请先输入手机验证码');
          return;
        }

        this.$store.dispatch('request', this.$api.login.loginBySms({
          code: this.smsCode,
          mobile: this.userPhone
        })).then(res => {
          this.$store.commit('user/setToken', res.result);
          this.getUserInfo();
        }).catch(() => {
          this.$message.error('登录失败，请稍后重试')
        })
      },
      // 登录之后的获取用户信息
      getUserInfo() {
        this.$store.dispatch('user/toFilterUserTenants', true).then(() => {
          if (!this.currentTenant) {
            this.$honexunMessage('提示', '该账号暂无企业信息，请联系客服');
            return;
          }
          let auditStatus = Number(this.currentTenant.auditStatus), type = this.currentTenant.type;
          // 状态为2则进入各模块的主题首页
          if (auditStatus === 2) {
            this.$router.push('/homes');
          } else {
            this.$store.commit('settleIn/changeCurrentType', type);
            this.$router.push('/enter');
          }
        })
      },
      // 密码登录
      passwordLogin() {
          this.$store.dispatch('request', this.$api.login.loginByPws({
              username: this.username,
              password: this.password
          })).then(res => {
              this.$store.commit('user/setToken', res.result);
              this.getUserInfo();
          }).catch(() => {
              this.$message.error('登录失败，请稍后重试')
          })
      },
      // 记住我点击事件
      rememberMeTab(val) {
        console.log(val);
      },
      // 类型切换事件
      activeValueChange(val) {
        this.activeValue = val;
      },
      phoneBlur() {

      },
      // 发送手机验证码
      sendSmsTab() {
        if (!this.checkPhoneNum(this.userPhone)) {
          this.$message.error('请输入正确的手机号');
          return;
        }
        this.verificationDialog = true
      },
      // 输入验证码弹框确认
      confirmDialog(data){
          this.verification = data.verification
          this.imgKey = data.imgKey
          let params = {
              code: this.verification,
              key: this.imgKey,
              mobile: this.userPhone
          };
          this.sendSmsCode(params);
          this.startCountDown(this.countDownTime);
      },
      // 发送短信验证码
      sendSmsCode(data) {
        this.$store.dispatch('request', this.$api.login.smsCode(data)).then(res => {
          console.log(res);
          if (res.success) {
            this.$message.success('手机验证码发送成功');
          }
        })
      },
      // 开始倒计时
      startCountDown(m) {
        this.countDown = m;
        if (m > 0) {
          let timer = setTimeout(() => {
            this.startCountDown(m - 1);
            clearTimeout(timer);
          }, 1000);
        }
      },
      // 验证手机号
      checkPhoneNum(value) {
        let myreg = /^1[3|4|5|6|7|8|9][0-9]{1}[0-9]{8}$/;
        return myreg.test(value);
      },
      //忘记密码跳转
      retrievePassword() {
        this.$router.push('/login/view/retrievePasswordOne');
      },
    },
    components: { verificationCode },
    mounted() {

    },
    computed: {
      currentTenant() {
        return this.$store.state.user.currentTenant
      }
    }
  }
</script>

<style lang="less" scoped>
  .leftIcon(@url) {
    background: url(@url) center right no-repeat;
    background-size: 16px;
  }

  .login-index {
    position: relative;
    height: calc(100vh);
    overflow: hidden;
    min-width: 800px;

    ::-webkit-input-placeholder {
      /* WebKit, Blink, Edge */
      font-size: 16px;
    }

    :-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      font-size: 16px;
    }

    ::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      font-size: 16px;
    }

    :-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      font-size: 16px;
    }

    .login-index-bg {
      width: calc(100% - 720px);
      background: url('./../../assets/image/login/banner.png') right center no-repeat;
      background-size: cover;
      position: absolute;
      top: 0;
      bottom: 0;
    }

    .login-index-container{
      width: 720px;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      padding-left: 66px;
    }

    .login-index-main {
      width: 400px;
      height: 534px;

      .logo-image {
        cursor: pointer;
      }

      .main-tab {
        margin-top: 70px;
        font-size: 20px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: @colorCommonFont;
        line-height: 20px;
        margin-bottom: 40px;
        height: 30px;
        .each-tab {
          position: relative;
          float: left;
          margin-right: 40px;
          .userUnSelect();
          cursor: pointer;
        }

        .bottom-line {
          width: 33px;
          height: 2px;
          opacity: 1;
          background: @activeRed;
          border-radius: 2px;
          position: absolute;
          bottom: -12px;
          left: 0;
          right: 0;
          margin: auto;
          display: none;
        }

        .is-active {
          font-size: 24px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: center;

          .bottom-line {
            display: block;
          }
        }
      }

      .login-info {

        .user-account,
        .user-password {
          height: 56px;
          position: relative;
          .flex(center, flex-start);
          margin-bottom: 20px;
        }

        .user-password {
          /deep/ .ant-input {
            padding-right: 38px;
          }

          .right-icon {
            position: absolute;
            z-index: 10;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            padding: 10px;
            cursor: pointer;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 36px;
            height: 36px;
            font-size: 0;
            line-height: 0;

            img {
              width: 16px;
              height: 16px;
            }
          }
        }

        .sms-verification-code {
          height: 56px;
          position: relative;
          .flex(center, center);
          margin-top: 16px;

          .sms-icon {
            .leftIcon('./../../assets/image/login/phone.png');
          }

          .right-option {
            width: 100px;
            position: absolute;
            z-index: 10;
            right: 0;
            top: 0;
            height: 56px;

            .option-content {
              font-size: 16px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              text-align: left;
              color: #333;
              line-height: 56px;

              span {
                .userUnSelect();
                cursor: pointer;
              }
            }

            .count-down {
              font-size: 16px;
              font-weight: 400;
              text-align: center;
              padding-right: 16px;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
              color: @colorGreyFont;
              opacity: 0.3;
              line-height: 56px;
            }
          }

          /deep/ .ant-input {
            padding-right: 100px;
          }
        }

        /deep/ .ant-input {
          height: 56px;
          border: none;
          background: @greyBackground;
          color: @colorCommonFont;
          font-size: 16px;
          padding-left: 20px;
          padding-right: 20px;

          &:focus {
            box-shadow: none;
          }

          &::-webkit-input-placeholder {
            font-size: 16px;
          }
          /* Firefox 4-18 */
          &:-moz-placeholder {
            font-size: 16px;
          }
          /* Firefox 19-50 */
          &::-moz-placeholder {
            font-size: 16px;
          }
          /* - Internet Explorer 10–11
             - Internet Explorer Mobile 10-11 */
          &:-ms-input-placeholder {
            font-size: 16px;
          }
          /* Edge (also supports ::-webkit-input-placeholder) */
          &::-ms-input-placeholder {
            font-size: 16px;
          }
          /* CSS Working Draft */
          &::placeholder {
            font-size: 16px;
          }
        }
      }

      .spare-area {
        box-sizing: border-box;
        .flex(flex-start, space-between);
        color: #b6b6b6;
        .ant-checkbox-wrapper{
          color: inherit;
        }
      }

      /deep/ .ant-checkbox-checked {
        .ant-checkbox-inner {
          background: @activeRed;
          border-color: @activeRed;
        }
      }
    }

    .right-area {
      .userUnSelect();
      cursor: pointer;
    }
  }

  .options-btn {
    width: 100%;
    height: 56px;
    background: @activeRed;
    border-radius: 4px;
    margin-top: 50px;
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 56px;
    text-align: center;
    color: #fff;
    .userUnSelect();
    cursor: pointer;
  }

  .weixin-login {
    .flex(center, center);
    width: 90px;

    .weixin-icon {
      width: 24px;
      height: 24px;
      background: url('./../../assets/image/login/weixin-code.png') center no-repeat;
      background-size: 100%;
      margin-right: 10px;
    }

    .label {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #999;
    }
  }
</style>
